<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="lib :: common_header"></head>
    <body>
        <div th:replace="lib :: header_box"></div>
        <div th:replace="lib :: menu_box (21)"></div>

        <div class="main-box">
            <div class="main-container">
                <div th:replace="lib :: main_container_header ('会员管理', '会员管理')"></div><!-- /main_container_header -->
                <div class="f14" id="app" v-cloak>
                    <br>
                    <div class="row">
                        <div class="col-sm-12">
                            <el-form :inline="true" class="demo-form-inline">
                                <el-form-item label="">
                                    <el-autocomplete
                                            class="inline-input"
                                            v-model="state1"
                                            value-key="name"
                                            :fetch-suggestions="querySearch"
                                            placeholder="请输入名称"
                                            style="width:400px;"
                                            clearable>
                                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                    </el-autocomplete>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="getOrganizationByName">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </div><!-- /col -->
                    </div><!-- /row -->

                    <div class="row">
                        <div class="col-sm-12">
                            <!-- 查询条件 -->
                            <search-condition :item-list="searchItem"
                                              v-model="hehe"
                                              @condition-change="getOrganizationByCondition"></search-condition>
                        </div><!-- /col -->
                    </div><!-- /row --> <br>

                    <div class="row">
                        <div class="col-sm-12">
                            <div class="my-table-box">
                                <div class="pt10 pb10 pl10 pr10">
                                    <el-button type="primary" @click="openOrganizationBox()">创建会员</el-button>
                                    <span class="search-info-no">
                                        共查到
                                        <span style="color:red;">
                                            {{ orgDataFromDB.length }}
                                        </span>条符合条件的会员信息
                                    </span>
                                </div>
                                <div id="ajaxlist">
                                    <table class="m_srchList">
                                        <tbody id="search-result">
                                            <tr v-for="(item, index) in orgData">
                                                <td class="imgtd" width="110">
                                                    <img th:src="@{/images/haha-icon.jpg}">
                                                </td>
                                                <td class="f12">
                                                    <p class="m-t-xs">
                                                        <a class="ma_h1">
                                                            <em class="f14">{{ item.name }}</em>
                                                        </a>
                                                    </p>
                                                    <p class="m-t-xs">
                                                        联系人：
                                                        <a class="text-primary">{{ item.contact }}</a>
                                                        <span class="m-l">会员类型：{{ item.type | changeOrgType }}</span>
                                                        <span class="m-l">会员注册时间：{{ item.created }}</span>
                                                    </p>
                                                    <p class="m-t-xs">
                                                        邮箱：{{ item.email }}
                                                        <span class="m-l">固定电话：{{ item.contact_phone }}</span>
                                                        <span class="m-l">移动电话：{{ item.contact_mobile }}</span>
                                                    </p>
                                                    <p class="m-t-xs">
                                                        地址：{{ item.address }}
                                                    </p>
                                                </td>
                                                <td width="220" class="statustd">
                                                    <el-button plain
                                                               type="mini"
                                                        @click="openOrganizationBox(item)">
                                                        修改
                                                    </el-button>
                                                    <el-button plain
                                                               type="mini"
                                                        @click="openUserManageBox(item)">用户管理</el-button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div><!-- /ajaxlist -->
                            </div><!-- /my-table-box -->

                            <div class="tr mt10">
                                <el-pagination
                                    layout="sizes, prev, pager, next"
                                    :page-sizes="[10, 20, 50, 100]"
                                    :page-size="orgPageSize"
                                    :current-page.sync="orgCurrentPageNo"
                                    :total="orgDataFromDB.length"
                                    @size-change="handleOrgSizeChange"
                                    @current-change="handleOrgPageChange">
                                </el-pagination>
                            </div><!-- /分页 -->
                        </div><!-- /col -->
                    </div><!-- /row -->

                </div><!-- /app -->
            </div>
        </div>
        <div th:replace="lib :: javascript_box"></div>
        <script th:src="@{/lib/console/organization_index.js}"></script>
    </body>
</html>

